<template>
  <div class="eip-view">
    <div class="header">
      <div class="top">
        <div class="left">
          <img src="@/assets/images/clientIcon.png" width="70px" height="70px" alt />
          <p class="title" v-text="models.model.projectName"></p>
          <div class="custom-tag">
            <span v-text="models.model.projectType"></span>
          </div>
        </div>
        <div class="right">
          <el-button-group>
            <el-button @click="editView()" size="small">
              <i class="fa fa-pencil"></i>
              <span>编辑</span>
            </el-button>
            <el-button @click="addView()" size="small">
              <i class="fa fa-plus"></i>
              <span>新增</span>
            </el-button>
          </el-button-group>
        </div>
      </div>
      <div class="bottom">
        <div class="form-item">
          <dd>所属部门</dd>
          <dl v-text="models.model.createdDeptName"></dl>
        </div>
        <div class="form-item">
          <dd>项目经理</dd>
          <dl v-text="models.model.projectManager"></dl>
        </div>
        <div class="form-item">
          <dd>合同金额</dd>
          <dl v-text="models.model.contractAmount + '￥'"></dl>
        </div>
        <div class="form-item">
          <dd>项目金额</dd>
          <dl v-text="models.model.projectAmount + '￥'"></dl>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-left">
        <el-tabs v-model="activeName" type="card" stretch>
          <el-tab-pane label="资料" name="ziLiao">
            <div class="nav zi-liao">
              <div class="form-view">
                <div class="form-row">
                  <dl>
                    <label>项目名称：</label>
                    <span v-text="models.model.projectName"></span>
                  </dl>
                  <dl>
                    <label>项目状态：</label>
                    <span v-text="models.model.status"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>项目编号：</label>
                    <span v-text="models.model.projectCode"></span>
                  </dl>
                  <dl>
                    <label>所属部门：</label>
                    <span v-text="models.model.createdDeptName"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>合同金额：</label>
                    <span v-text="models.model.contractAmount+'元'"></span>
                  </dl>
                  <dl>
                    <label>项目金额：</label>
                    <span v-text="models.model.projectAmount+'元'"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>申请预立项时间：</label>
                    <span v-text="models.model.preApplyDate"></span>
                  </dl>
                  <dl>
                    <label>申请人员：</label>
                    <span v-text="models.model.createdUserName"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>申请立项时间：</label>
                    <span v-text="models.model.createdDate"></span>
                  </dl>
                  <dl>
                    <label>销售人员：</label>
                    <span v-text="models.model.saleUserId"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>项目合同名称：</label>
                    <span v-text="models.model.contractName"></span>
                  </dl>
                  <dl>
                    <label>项目合同编号：</label>
                    <span v-text="models.model.contractCode"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>项目计划时间：</label>
                    <span v-text="models.model.planStartDate"></span>
                  </dl>
                  <dl>
                    <label>项目预计立项年月：</label>
                    <span v-text="models.model.estimateDate"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>项目计划初验时间：</label>
                    <span v-text="models.model.planFirstAcceptDate"></span>
                  </dl>
                  <dl>
                    <label>项目计划终验时间：</label>
                    <span v-text="models.model.planFinalAcceptDate"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>项目经理：</label>
                    <span v-text="models.model.projectManager"></span>
                  </dl>
                  <dl>
                    <label>项目实施地点：</label>
                    <span v-text="models.model.implementAddr"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>项目经理评估的实际工作量：</label>
                    <span v-text="models.model.pmWorkload+'人日'"></span>
                  </dl>
                  <dl>
                    <label>部门经理审核的实际工作量：</label>
                    <span v-text="models.model.deptWorkload+'人日'"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>工作量评估人：</label>
                    <span v-text="models.model.workloadUser"></span>
                  </dl>
                  <dl>
                    <label>工作量审核人：</label>
                    <span v-text="models.model.workloadCheckUser"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>专家评估工作量：</label>
                    <span v-text="models.model.expertWorkload+'人日'"></span>
                  </dl>
                  <dl>
                    <label>专家小组成员：</label>
                    <span v-text="models.model.expertUsers"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>市场部评估工作量：</label>
                    <span v-text="models.model.marketWorkload+'人日'"></span>
                  </dl>
                  <dl>
                    <label>市场部经理：</label>
                    <span v-text="models.model.marketManager"></span>
                  </dl>
                  <dl>
                    <label>最终确认工作量：</label>
                    <span v-text="models.model.finalWorkload+'人日'"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>免维护期：</label>
                    <span v-text="models.model.freeMaintenance+'年'"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl style="width: 100%">
                    <label>项目需求概述：</label>
                    <span v-text="models.model.projectNeeds" style="line-height: 30px"></span>
                  </dl>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'客户(' + customers.length + ')'" name="kehu">
            <div class="nav shangJi">
              <el-table :data="customers">
                <el-table-column prop="name" label="客户名称"></el-table-column>
                <el-table-column prop="code" label="客户编码"></el-table-column>
                <el-table-column prop="telephone" label="客户电话"></el-table-column>
                <el-table-column prop="adrress" label="单位地址"></el-table-column>
                <el-table-column prop="tags" label="自定义标签"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'商机(' + chanceList.length + ')'" name="shangJi">
            <div class="nav shangJi">
              <el-table :data="chanceList">
                <el-table-column prop="title" label="商机标题"></el-table-column>
                <el-table-column prop="budget" label="项目预算"></el-table-column>
                <el-table-column prop="contractBenefit" label="合同毛利"></el-table-column>
                <el-table-column prop="posibility" label="可能性"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'合同(' + contractList.length + ')'" name="heTong">
            <div class="nav heTong">
              <el-table :data="contractList">
                <el-table-column prop="code" label="合同编号"></el-table-column>
                <el-table-column prop="name" label="合同名称"></el-table-column>
                <el-table-column prop="amount" label="合同金额"></el-table-column>
                <el-table-column prop="signDate" label="签订时间"></el-table-column>
                <el-table-column prop="userName" label="销售人员"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'文档(' + fileList.length + ')'" name="wenDang">
            <div class="nav wenDang">
              <el-upload
                class="upload-file"
                action="/eip/contractProject/uploadfile"
                :http-request="uploadFile"
                :show-file-list="false"
                multiple
              >
                <el-button type="primary" class="el-icon-upload" size="small">点击上传</el-button>
                <span>（文件大小不超过50M）</span>
              </el-upload>
              <el-table :data="fileList">
                <el-table-column prop="name" label="文件名"></el-table-column>
                <el-table-column prop="size" label="文件大小（字节）"></el-table-column>
                <el-table-column prop="type" label="文件类型"></el-table-column>
                <el-table-column prop="uploaderName" label="上传者"></el-table-column>
                <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="onPreview(scope.row)" size="small">下载</el-button>
                    <el-button type="danger" @click="beforeRemove(scope.row)" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="main-right">
        <el-tabs v-model="activeNameRight" type="card">
          <el-tab-pane label="项目收支情况" name="activity">
            <div class="nav activity">
              <div class="top">
                <a @click="newPay()">
                  <i class="el-icon-plus"></i>新建记录
                </a>
                <el-select v-model="inputSelect" placeholder="请选择" clearable size="small">
                  <el-option
                    v-for="item in activityOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>

                <el-input
                  placeholder="请输入关键字"
                  prefix-icon="el-icon-search"
                  v-model="inputSearch"
                  clearable
                  size="small"
                ></el-input>
              </div>
              <div class="article">
                <div class="tis" v-show="payOptions.length < 1">暂无数据</div>
                <el-timeline>
                  <el-timeline-item
                    v-for="item in payOptions"
                    :timestamp="formatTime(item.createdDate)"
                    placement="top"
                    icon="el-icon-more"
                    size="large"
                    color="#0bbd87"
                    type="success"
                    :key="item.payId"
                  >
                    <el-card>
                      <el-collapse class="article-collapse">
                        <el-collapse-item>
                          <template slot="title">
                            <img src="@/assets/images/profile.jpg" />
                            <span v-text="item.payType"></span>
                            <span v-text="item.amount + '￥'"></span>
                          </template>
                          <div>
                            <div class="aside">
                              <dl>
                                <dt>计划收款时间：</dt>
                                <dd v-text="item.planDate"></dd>
                              </dl>
                              <dl>
                                <dt>实际收款时间：</dt>
                                <dd v-text="item.autualDate"></dd>
                              </dl>
                            </div>
                          </div>
                        </el-collapse-item>
                      </el-collapse>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Controller from "@/libs/framework/controller";
export default class Instance extends Controller {
  onBeforeInit() {}
  mixin() {
    return {
      data() {
        return {
          activeName: "ziLiao",
          activeNameRight: "activity",
          inputSearch: "",
          inputSelect: "",
          activityOptions: [
            {
              value: "7",
              label: "最近7天",
            },
            {
              value: "3",
              label: "最近3天",
            },
            {
              value: "1",
              label: "最近1天",
            },
          ],
          models: {
            model: {},
          },
          viewTags: [],
          chanceList: [],
          customers: [],
          contractList: [],
          fileList: [],
          payList: [],
          payOptions: [],
        };
      },
      methods: {
        editView() {
          this.getWorkflowArgs({ formId: this.models.model.projectId }).then(
            (rlt) => {
              if (rlt && rlt.appUrl && rlt.appCode) {
                window.open(
                  `${rlt.appUrl}?action=processView&historyTaskId=${
                    rlt.historyTaskId
                  }&appCode=${rlt.appCode}&version=${
                    rlt.version
                  }&_r=${new Date().getTime()}`
                );
              } else {
                this.notifyError("无法获取应用的处理地址");
              }
            }
          );
        },
        addView() {
          // let type =
          //   this.models.model.bigType == "销售合同"
          //     ? "ContractForm"
          //     : purchaseContractForm;
          // this.$root.openModal("/smartform/hub/" + type);
          this.$root.openModal("/smartform/workflow/ProjectForm");
        },
        newPay() {
          this.$root.openModal("/smartform/hub/ProjectPayForm", getFollow, {
            projectId: this.models.model.projectId,
          });
        },
        initProject() {
          request({
            url: "/eip/project2/getAll",
            method: "get",
            params: { projectId: this.$route.query.id },
          }).then((r) => {
            console.log(r);
            this.models.model = r.parameters.project;
            this.contractList = r.parameters.contracts;
            this.chanceList = r.parameters.customerChances;
            this.customers = r.parameters.customers;
            this.getFileList();
            this.getFollow();
          });
        },
        getFileList() {
          request({
            url: "/eip/contractProject/getFileList",
            method: "get",
            params: {
              id: this.models.model.projectId,
            },
          }).then((r) => {
            this.fileList = r;
          });
        },
        getFollow() {
          request({
            url: "/eip/project2/getPays",
            method: "get",
            params: {
              projectId: this.models.model.projectId,
            },
          }).then((r) => {
            this.payList = r.parameters.projectPays;
            this.payOptions = r.parameters.projectPays;
          });
        },
        uploadFile(param) {
          var fileObj = param.file;
          // FormData 对象
          var form = new FormData();
          // 文件对象
          form.append("editormd-image-file", fileObj);
          form.append("id", this.models.model.projectId);
          var self = this;
          request({
            url: param.action,
            method: "POST",
            data: form,
          }).then((res) => {
            if (res && res.success == "1") {
              var url = res.url.slice(0, res.url.lastIndexOf("."));
              self.fileList.push({
                name: res.name,
                url: url,
                type: res.type,
                size: res.size,
                uploadTime: res.uploadTime,
                uploaderName: res.uploaderName,
              });
              this.notifySuccess("上传成功");
            }
          });
        },
        beforeRemove: function (file) {
          return this.$confirm("确定要删除-->" + file.name + "吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            var self = this;
            var attachmentId = file.url.slice(file.url.indexOf("down/") + 5);
            request({
              url: "/attachment/remove",
              method: "POST",
              params: { attachmentId: attachmentId },
            }).then(function (rlt) {
              if (rlt && rlt.success) {
                self.notifySuccess("已成功删除-->" + file.name);
                for (const i in self.fileList) {
                  if (self.fileList[i].url.indexOf(attachmentId) > -1) {
                    self.fileList.splice(i, 1);
                    break;
                  }
                }
                return Promise.resolve();
              } else {
                self.notifyError(rlt.message);
                return Promise.reject().catch(() => {});
              }
            });
          });
        },
        onPreview: function (file) {
          window.location.assign(this.$$server + file.url);
        },
        formatTime(time) {
          return time.split(" ")[0];
        },
        checkTime(day, date) {
          const oneTimestamp = 86400000;
          let nowTime = new Date().getTime();
          let resultCount =
            new Date(date).getTime() + day * oneTimestamp - nowTime;
          if (resultCount > 0) {
            return true;
          }
          return false;
        },
      },
      created() {
        this.initProject();
        window.getFollow = this.getFollow;
      },
      watch: {
        inputSelect: function (newVal) {
          if (!newVal) {
            this.payOptions = this.payList;
            return;
          }
          this.payOptions = _.filter(this.payList, (item) => {
            return this.checkTime(newVal, item.createdDate);
          });
        },
        inputSearch: function (newVal) {
          this.payOptions = _.filter(this.payList, (item) => {
            return item.payType.includes(newVal);
          });
        },
      },
    };
  }
}
</script>
<style scoped>
html,
body,
#app,
.portlet,
.portlet-body,
.table-container,
.eip-view {
  height: 100%;
}

.portlet.light .portlet-body {
  padding: 0 !important;
}

body,
.eip-view {
  background-color: rgb(242, 244, 247);
}

[v-cloak] {
  display: none;
}

.header {
  width: 100%;
  height: 200px;
  padding: 10px 25px;
  background: white;
  box-shadow: 0 0 5px #b3b8be;
  min-width: 1260px;
}

.header .top {
  display: flex;
  justify-content: space-between;
}

.header .top .left {
  min-width: 300px;
  display: flex;
}

.header .top .left .title {
  font-size: 26px;
  color: #606266;
  padding: 20px;
  margin: 0;
}

.header .top .right {
  margin-top: 15px;
}
.header .bottom {
  margin: 15px 8px;
  height: 50px;
}

.header .custom-tag {
  border: 1px solid #dcdfe6;
  color: rgb(82, 185, 209);
  transition: 1s;
  font-weight: 500;
  padding: 10px 20px;
  height: 40px;
  margin: 15px 5px;
}

.header .custom-tag:hover {
  border: 1px solid #9faccb;
}

.header .form-item {
  float: left;
  min-width: 80px;
  padding: 0 85px;
}

.header .form-item dd {
  color: rgb(180 181 183);
  font-size: 14px;
}

.header .form-item dl {
  font-size: 16px;
  color: #606266;
  margin: 5px 0;
  font-weight: 600;
}

.eip-view .main {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.main-left {
  background: white;
  width: 68%;
  height: 700px;
  min-width: 860px;
  overflow: auto;
}

.main-left .nav {
  padding: 10px 5%;
}

.main-left .form-view {
  margin-top: 20px;
}

.main-left .form-view .form-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.main-left .form-view .form-row dl {
  width: 45%;
}

.main-left .form-view .form-row dl label {
  color: rgb(180 181 183);
  font-size: 14px;
}

.main-left .form-view .form-row dl span {
  font-size: 15px;
}

.main-left .nav-title {
  text-decoration: none !important;
  color: #606266;
  font-size: 16px;
  font-weight: 600;
}

.main-left .nav-title i {
  font-size: 16px;
  font-weight: 600;
  padding: 0 5px;
}
.wenDang .upload-file {
  padding: 0 0 10px;
}
.wenDang .upload-file span {
  color: rgb(180 181 183);
  margin: 0 10px;
}
.main-right {
  background: white;
  height: 700px;
  width: 30%;
  min-width: 400px;
  overflow-x: auto;
}

.main-right .activity .top {
  display: flex;
  justify-content: space-around;
}

.main-right .activity .top a {
  margin-top: 10px;
  color: #409eff;
}

.main-right .activity .top .el-select,
.main-right .activity .top .el-input {
  width: 150px;
}

.activity .article .el-timeline {
  padding: 30px 5%;
}
.activity .el-card.is-always-shadow {
  box-shadow: none;
}
.activity .article-collapse {
  border: none !important;
}
.activity .article-collapse img {
  border-radius: 50%;
  width: 40px;
  text-align: center;
}
.activity .article-collapse span {
  padding: 0 10px;
  color: #606266;
  font-weight: 600;
}
.activity .article-collapse .aside {
  padding: 30px 30px 0;
  color: #606266;
}
.activity .article-collapse .aside dl {
  display: flex;
}
.article .tis {
  text-align: center;
  padding: 50px 0;
  color: rgb(180 181 183);
}
</style>
